import {ModalForm, ProFormSelect, ProFormText, ProFormTreeSelect, ProFormDependency, DrawerForm, ProFormRadio } from "@ant-design/pro-components";
import IHttp, {IAxiosResponse} from "@/services/http.service";
import React, {useEffect, useState} from "react";
import {Form, message} from "antd";
import { firstValueFrom, lastValueFrom } from "rxjs"
import environment from "@/environment";
import IHelper from "@/services/helper.service";

type IProps = {
  item: API.PubTaskItem | undefined
  onCancel: () => void
  onRefreshTable: () => void
  onFinish: (data: any) => void
}

type SelectorFormProps = {
  selectAccounts: string[]
}

export default function PubAccountSelector({item, onCancel, onRefreshTable, onFinish}: IProps) {
  const [form] = Form.useForm<SelectorFormProps>()
  const open = Boolean(item)
  useEffect(() => {
    if (open) {
      form.setFieldsValue({selectAccounts: (item?.account || "").split(",")})
    }
  }, [open])
  return (
    <ModalForm<SelectorFormProps> 
      open={Boolean(item)}
      width={360}
      form={form}
      title={item?.id ? "编辑账号" : "新建账号"}
      modalProps={{
        destroyOnClose: true,
        onCancel,
        maskTransitionName:"ant-fade",
        transitionName: "ant-fade",
      }}
      onFinish={async (values) => {
        if (values.selectAccounts.length <= 0) return
        return onFinish(values.selectAccounts.join(","))
      }}
    >
      <ProFormSelect
        name="selectAccounts"
        label="发布账号"
        mode="multiple"
        request={async () => {
          return (item?.account || "").split(",").map(e => {
            return {label: e, value: e}
          })
        }}
        rules={[
          {required: true}
        ]}
      />
    </ModalForm>
  )
}